<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="main">
  <div class="title">
    <h2>邮箱验证登录</h2>
  </div>

  <div class="content">
    <img src="https://p2.ssl.qhimgs1.com/sdr/400__/t014108c1a1fec47d88.jpg" class="img">
    <div class="text">
      <div style="font-family: STXingkai;font-size: 15px;display: flex;justify-content: left;font-size: 30px;">尊敬的Mr ${username}:</div>
      <br/>
      <div style="font-family: STXingkai;text-align: left;display: flex;font-size: 30px">
        <div>&nbsp;&nbsp;&nbsp;&nbsp;您的登录验证码为:<p style="color: orange;display: inline;border-bottom: orange solid 1px;">${code}</p>,此登录码将于5分钟后失效，请及时进行登录验证</div>
      </div>
    </div>
  </div>

</div>
</body>
<style>
  body{
    display: flex;
    justify-content: center;
    text-align: center;
  }

  .main{
    width: 1500px;
    height: 500px;
  }

  .title{
    height: 70px;
    width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to right, #f5f0f0, #fcfccf,#f5f0f0);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    font-size: 20px;
    font-family: STXinwei;
  }

  .content{
    height: 430px;
    width: 1500px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .img{
    height: 1000px;
    /*width: 700px;*/
  }

  .text{
    position: absolute;
    height: 270px;
    width: 900px;
    border-radius: 10px;
    background-color: rgba(231, 229, 229, 0.81);
    margin-top: 50px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding-left: 20px;
  }
</style>
</html>
